<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="content">搜索</block>
		</cu-custom>
		<!-- #endif -->
		
		<!-- #ifdef APP-VUE -->
		<view class="cu-custom overflow bg-white" >
			<view class="paddint-top-xl margin-top-xl"></view>
		</view>
		<!-- #endif -->
		<view class="bg-white h100">
			<view class="cu-bar search">
				<!-- #ifdef H5 -->
				<view class="action" @tap="BackPage">
					<text class="cuIcon-back"></text>
					<slot name="backText"></slot>
				</view>
				<!-- #endif -->
				<view class="search-form text-center align-center" @tap="modalName = 'searchModal'">
					<text class="cuIcon-search lg text-gray"></text>
					<input type="text" placeholder="请输入搜索的商品" confirm-type="search" @blur="focus=false" :focus="focus" bindinput="searchIcon"
					 v-model="keyword" @confirm="goSearch(keyword)"></input>
				</view>
			</view>
			<view class="cu-bar ">
				<view class="action text-bold text-black m-title">热门搜索</view>
			</view>
			<view class="over margin-lr" v-if="hot">
				<view class="cu-btn  round line-gray margin-right-sm margin-bottom-sm fl text-cut overflow" v-for="(item,index) in hot"
				 :key="index" @tap="goSearch(item)">{{item}}</view>
			</view>

			<view class="cu-bar  margin-top">
				<view class="action text-bold text-black m-title">搜索历史</view>
			</view>
			<view class="over margin-lr" v-if="history">
				<view class="cu-btn  round line-gray margin-right-sm margin-bottom-sm fl text-cut overflow" v-for="(item,index) in history"
				 :key="index" @tap="goSearch(item)">{{item}}</view>
			</view>
		</view>

	</view>
</template>

<script>
	import goodsView from '@/components/shop/goodsView.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			goodsView,
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'channelLogin', 'member']),
		data() {
			return {
				history: [],
				hot: null,
				focus: false,
				keyword: ''
			};
		},
		onLoad(options) {
			this.type = options.type
			if (options.cid) {
				this.gc_id = options.cid
			}
			let hot = this.$common.getCache('search_hot')
			if (!hot) {
				this.getHot()
			} else this.hot = hot

			let history = this.$common.getCache('search_history')
			if (history) this.history = history
		},
		methods: {
			getHot() {
				this.$http
					.get('in_shop_index')
					.then((response) => {
						this.hot = response.data.data.search.hot_search_list

						this.$common.setCache('search_hot', this.hot, 5 * 60)
					})
					.catch((response) => {})
			},
			goSearch(keyword) {
				this.keyword = keyword
				var index = this.history.indexOf(keyword)
				if (index > -1) {
					this.history.splice(index, 1)
				}

				this.history.unshift(this.keyword)
				if (this.history.length > 20) this.history = this.history.splice(0, 20)
				this.$common.setCache('search_history', this.history)
				uni.navigateTo({
					url: "/pages/shop/list?keyword=" + keyword
				})
			},
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
			}
		},
	}
</script>

<style>
	.search {
		background-color: #FFFFFF;
	}

	.select-box {
		padding: 20rpx 36rpx;
		width: 750rpx;
		height: 80rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.select-box view {
		flex: 0 0 33.3%;
		font-size: 30rpx;
		text-align: center;
	}

	.select-box .picker-box {
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgba(26, 26, 26, 1);
	}

	.select-box .click-box {
		color: rgba(251, 178, 64, 1);
	}

	.list-box {
		border-radius: 5rpx;
		height: 86vh;
	}

	.item-list {
		margin: 20rpx 20rpx;
		background-color: #FFFFFF;
		overflow: hidden;
	}

	.item-list .cu-item {
		border-bottom: 1rpx solid rgba(238, 238, 238, 1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0rpx 20rpx;
		padding: 10px 0;
	}

	.cu-item .goods-pic {
		width: 200rpx;
		height: 200rpx;
		min-width: 200rpx;
		margin-right: 24rpx;
		flex-shrink: 0;
	}

	.goods-pic image {
		width: 100%;
		height: 100%;
	}

	.cu-item .right {
		width: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 200rpx;
	}

	.right .title {
		height: 96rpx;
		font-size: 30rpx;
		color: rgba(26, 26, 26, 1);
		line-height: 48rpx;
		display: -webkit-box;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.right .price {
		font-size: 32rpx;
		color: rgba(255, 0, 0, 1);
		line-height: 48rpx;
	}

	.right .detail {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: rgba(166, 166, 166, 1);
		line-height: 40rpx;
	}

	.h100 {
		height: 100vh;
	}

	.iconp {
		width: 24rpx;
		height: 24rpx;
	}


	.m-title {
		font-size: 32rpx !important;
		position: relative;
		display: block;
	}

	.m-title::after {
		content: "";
		left: 0;
		position: absolute;
		width: 70rpx;
		height: 4rpx;
		bottom: 0;
		background-color: #ffb03a;
		z-index: 0;
	}

	.over {
		overflow: hidden;
	}
</style>
